<template>
  <div class="am-content">
    <div class="amc-toolbar">
      <el-date-picker
        v-model="pickerTime"
        type="datetimerange"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd HH:mm:ss"
        align="right"
        @change="datePickerChanage">
      </el-date-picker>
      <el-input class="m-input-width" style="margin-left:10px;" v-model="query.name" clearable placeholder="输入姓名"/>
      <el-button type="success" icon="el-icon-search" style="margin-left:10px;" @click="toQuery">搜索</el-button>
      <el-button type="warning" icon="el-icon-refresh-right" @click="resetQuery">重置</el-button>
      <!--<el-button type="primary" icon="el-icon-check" @click="resetQuery">批量处理</el-button>-->
    </div>
    <el-table border stripe :data="tableData" :header-cell-style="tableHeaderCellStyle">
      <el-table-column prop="callName" label="姓名" align="center"></el-table-column>
      <el-table-column prop="idCard" label="身份证号码" align="center"></el-table-column>
      <el-table-column prop="phone" label="手机号" align="center"></el-table-column>
      <el-table-column prop="location" label="事发地点" align="center"></el-table-column>
      <el-table-column prop="createTime" label="报警时间" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="selectTxt(scope.$index, scope.row)">查看图文接警记录</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="curPage"
      :page-size="limit"
      layout="total, prev, pager, next"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange">
    </el-pagination>
  </div>
</template>

<script>
import CommonStyle from "@/util/CommonStyle";
import paginationb from "@/mixins/paginationb";
import ElDatePicker from "@/mixins/ElDatePicker";
export default {
  name: "TIAlarmRecord",
  mixins: [paginationb, ElDatePicker],
  data() {
    return {
      tableHeaderCellStyle: CommonStyle.tableHeaderCellStyle,
      queryUrl: "/api-bureau/portal/mediaalarm/list"
    };
  },
  mounted() {
    this.queryData();
  },
  methods: {
    selectTxt(index, row) {
      this.$router.push({
        path: "TIAlarmRecordDetail",
        query: {
          id: row.id
        }
      });
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import "../../../styles/police-common.scss";
</style>
